<!--  -->
<template>
  <div class="custom-tabs">
    <slot />
  </div>
</template>

<script>
  export default {

    components: {},
    data() {
      return {}
    }

    // computed: {},

    // mounted: {},

    // methods: {}
  }
</script>
<style lang="scss" scoped>
  .custom-tabs {
    ::v-deep .el-tabs--border-card {
      background: #f3f4f8;
      border: none;
      box-shadow: none;

    }

    ::v-deep .el-tabs__header {
      width: fit-content;
      border: none;

      .el-tabs__nav {
        border: none;
      }
    }

    ::v-deep .el-tabs__item {
      padding: 0 50px !important;
      color: #666;
      background-color: #DADCE8;
      border: none !important;
      border-radius: 4px 4px 0 1px;

      &:not(:last-child) {
        margin-right: 8px;
      }

      &:not(.is-disabled):hover {
        color: #666;
      }
    }

    ::v-deep .el-tabs__item.is-active {
      color: #D12D1F !important;
      background-color: #fff;

      &:hover {
        color: #D12D1F;
      }
    }

    ::v-deep .el-tabs__content {
      background: #FFF;
    }

      ::v-deep .el-tabs__nav-scroll{
      background: #f3f4f8;
    }
  }
</style>
